import { Layout, theme } from "antd";
import LoginButton from "./login/LoginButton";
import { getPreviewUrl } from "@utils/WeStudyUtil";


const { Content } = Layout;

const UserLogin = () => {

  const previewUrl = getPreviewUrl();
  const imgUrl = previewUrl + "f962cf76726d4750a576e306d91a3f52";

  const { token } = theme.useToken();
  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Content>
        <div
          style={{
            height: "100vh",
            display: "flex",
            flexDirection: "column",
            backgroundColor: token.colorBgContainer,
          }}
        >
          <div style={{ flex: 1 }} />

          <div
            style={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              gap: "5%",
              padding: 24,
            }}
          >
            <div style={{ width: "40%" }}>
              <img
                src={imgUrl}
                style={{
                  width: "100%",
                  borderRadius: token.borderRadiusLG,
                  boxShadow: token.boxShadow,
                }}
              />
            </div>

            <div
              style={{
                width: "30%",
                textAlign: "right",
                paddingRight: token.paddingLG,
              }}
            >
              <LoginButton />
            </div>
          </div>

          <div style={{ flex: 1 }} />
        </div>
      </Content>
    </Layout>
  );
};

export default UserLogin;